/*
 * @Date: 2022-05-16 16:27:16
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-05-18 09:46:03
 * @FilePath: \react-lvyou\src\views\shoppingCart\index.tsx
 * @Description: something
 */
import { useSelector } from "@/store/hooks";
import React, { memo } from "react";
import { Row, Col, Affix } from "antd";
import PrivateComponent from "@/components/privateCmp";
import { PaymentCard } from "@/components/paymentCard/PaymentCard";
import { ProductList } from "@/components/productList";
import { fetchClearShoppingCartList, checkout } from "@/store/shoppingCart";
import { ShoppingCartContainer } from "./style";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
const ShoppingCart = memo(() => {
  const dispatch = useDispatch();
  const { cartItems, shoppingCartLoading } = useSelector((state) => ({
    cartItems: state.ShoppingCart.items,
    shoppingCartLoading: state.ShoppingCart.loading,
  }));
  const navigate = useNavigate();
  return (
    <PrivateComponent>
      <ShoppingCartContainer>
        <Row>
          <Col span={16}>
            <div className="product-list-container">
              <ProductList
                data={cartItems.map((s) => s.touristRoute)}
              ></ProductList>
            </div>
          </Col>
          <Col span={8}>
            <Affix>
              <div className="payment-card-container">
                <PaymentCard
                  loading={shoppingCartLoading}
                  originalPrice={cartItems
                    .map((s) => s.originalPrice)
                    .reduce((a, b) => a + b, 0)}
                  price={cartItems
                    .map(
                      (s) =>
                        s.originalPrice *
                        (s.discountPresent ? s.discountPresent : 1),
                    )
                    .reduce((a, b) => a + b, 0)}
                  onShoppingCartClear={() => {
                    dispatch<any>(
                      fetchClearShoppingCartList(cartItems.map((s) => s.id)),
                    );
                  }}
                  onCheckout={() => {
                    if (cartItems.length <= 0) {
                      return;
                    }
                    dispatch<any>(checkout());
                    navigate("/home/placeorder");
                  }}
                />
              </div>
            </Affix>
          </Col>
        </Row>
      </ShoppingCartContainer>
    </PrivateComponent>
  );
});

export default ShoppingCart;
